<template>
  <div class="popup-box-container">
    <div class="container">
      <div v-if="title" class="title">
      {{ title }}
    </div>
    <div class="close" @click="$emit('closePopup')">
      <svg
        t="1627543413214"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3097"
        width="20"
        height="20"
      >
        <path d="M877.216 491.808" p-id="3098" fill="#1296db"></path>
        <path
          d="M575.328 510.496 946.784 140.672c17.568-17.504 17.664-45.824 0.192-63.424-17.504-17.632-45.792-17.664-63.36-0.192L512.032 446.944 143.712 77.216C126.304 59.712 97.92 59.648 80.384 77.12 62.848 94.624 62.816 123.008 80.288 140.576l368.224 369.632L77.216 879.808c-17.568 17.504-17.664 45.824-0.192 63.424 8.736 8.8 20.256 13.216 31.776 13.216 11.424 0 22.848-4.352 31.584-13.056l371.36-369.696 371.68 373.088C892.192 955.616 903.68 960 915.168 960c11.456 0 22.912-4.384 31.648-13.088 17.504-17.504 17.568-45.824 0.096-63.392L575.328 510.496 575.328 510.496zM575.328 510.496"
          p-id="3099"
          fill="#1296db"
        ></path>
      </svg>
    </div>
    <slot name="container" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'popup_slot',
  props: {
    title: {
      type: String
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  box-sizing: border-box;
  width: 870px;
  background: rgb(14, 42, 70);
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid rgb(53, 163, 255);

  .title {
    width: 100%;
    height: 60px;
    line-height: 60px;
    margin-left: 5px;
    margin-bottom: 24px;
    padding-left: 20px;
    border-radius: 15px 15px 0 0;
    background: linear-gradient(to right, rgb(0, 40, 123), transparent);
  }
  .close {
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.1);
    width: 120px;
    height: 120px;
    text-align: center;
    line-height: 150px;
    border-radius: 8px;
    cursor: pointer;
  }
}
</style>
